<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="姓名">
              <a-input placeholder="请输入姓名" v-model="queryParam.perName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="身份证号">
              <a-input placeholder="请输入身份证号" v-model="queryParam.perIdcard"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            <a-button type="primary" @click="handleReset" icon="reload" style="margin-left: 8px">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button type="primary" icon="download" @click="handleExportXls('人员明细');">导出</a-button>
      <span style="color: black;font-size: 18px;margin-left: 100px;">
        {{tp.typeName}}总人数：<span style="color: orange">{{tp.allCnt}}</span>人，
        {{day}}天内已做<span style="color: #2f54eb;">{{tp.yCnt}}</span>人，
        未做<span style="color: red;">{{tp.nCnt}}</span>人
      </span>
    </div>
    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange"
        class="j-table-force-nowrap"
        :rowClassName="tableRowClassName">
        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
      </a-table>
    </div>
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'

  export default {
    name: 'WoPeopleNucelicList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
    },
    data () {
      return {
        description: '人员管理管理页面',
        disableMixinCreated:true,
        day:7,
        tp:{},
        ipagination: {
            current: 1,
            pageSize: 30,
            pageSizeOptions: ['30', '60', '100'],
            showTotal: (total, range) => {
              return range[0] + '-' + range[1] + ' 共' + total + '条'
            },
            showQuickJumper: true,
            showSizeChanger: true,
            total: 0
           },
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'人员分组',
            align:"center",
            dataIndex: 'psnTypeId_dictText'
          },
          {
            title:'姓名',
            align:"center",
            dataIndex: 'perName'
          },
          {
            title:'身份证号',
            align:"center",
            dataIndex: 'perIdcard'
          },
          {
            title:'电话',
            align:"center",
            dataIndex: 'perTel'
          },
          {
            title:'性别',
            align:"center",
            dataIndex: 'perSex_dictText'
          },
          {
            title:'核酸检测时间',
            align:"center",
            dataIndex: 'nucleicDate'
          },
          {
            title:'时长',
            align:"center",
            dataIndex: 'dayTimes'
          },
          {
            title:'核酸检测结果',
            align:"center",
            dataIndex: 'nucleicResult_dictText'
          },
        ],
        props:{

        },
        url: {
          list: "/people/woPeople/queryPageListByType",
          listByType: "/people/woPeople/queryPageListByType",
          exportXlsUrl: "/people/woPeople/exportXls",
        },
        dictOptions:{},
        superFieldList:[],
      }
    },
    created() {
    },
    computed: {

    },
    methods: {
      ExportXls(flag){
        if(flag===0){
          this.handleExportXls('人员明细');
        }else if(this.selectedRowKeys.length>0){
          this.handleExportXls('人员明细');
        }else{
          this.$message.warning("请勾选需要导出的人员！");
        }

      },
      //行内颜色
      tableRowClassName(record, index) {
        if (record.day >= this.day||record.nucleicDate==null) {
          return 'rowRed'
        }
      },
      handleReset(){
        this.queryParam.perName="";
        this.queryParam.perIdcard="";
        if(this.queryParam.typeId){
          this.loadData(1);
        }
      },
      loadPeople(record,day){
        this.$nextTick(()=> {
          this.queryParam.typeId=record.id;
          this.tp=record;
          this.day=day;
          this.loadData(1);
        })

      },
      initDictConfig(){
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
  /deep/.ant-table-tbody .rowRed{
    color: red !important;
  }
</style>